<template>
  <div class="research_wrap">
    <div class="develop_wrap" v-for="(item, index) in userList" :key="index">
      <Card :border="true" style="border-radius: 20px" class="dev-Box">
        <div class="develop_right">
          <img :src="item.img" style="width: 40%; margin-left: 30%" alt="" />
        </div>
        <div class="develop_left">
          <h1>{{ item.name }}</h1>
          <h2>{{ item.eName }}</h2>
          <p v-for="(user, uIndex) in item.title" :key="uIndex">
            <span style="font-size: 20px; font-weight: 600">·</span>
            <span style="color: #000000; font-weight: 600">{{
              user.label
            }}</span
            ><span>：{{ user.txt }}</span>
          </p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          img: require("@/assets/asissi/user/wxx.jpg"),
          name: "王西西",
          eName: "Wang Xixi（Cici）",
          title: [
            {
              label: "爱喜喜品牌主理人",
              txt: "担任爱喜喜珠宝品牌的主理人，全面负责品牌定位、设计方向及市场推广，致力于打造兼具艺术性与商业价值的高端珠宝品牌。",
            },
            {
              label: "香港（HKIG）珠宝设计师",
              txt: "持有香港权威珠宝设计师认证，善于通过创意设计诠释珠宝的独特美感，将现代与经典元素融入作品中。",
            },
            {
              label: "美国（ICJA）珠宝鉴定师",
              txt: "具备专业的珠宝鉴定资质，熟悉珠宝的品质鉴别与价值评估，为客户提供权威的珠宝鉴定服务。",
            },
            {
              label: "国际注册（ICAHRA）艺术品鉴定评估师",
              txt: "专注于艺术品及珠宝的鉴定与评估工作，精准把握市场趋势，帮助客户实现投资与收藏价值的最大化。",
            },
          ],
        },
        {
          img: require("@/assets/asissi/user/zclean.jpg"),
          name: "张苷静",
          eName: "Zhang Ganjing（Jumbo）",
          title: [
            {
              label: "爱喜喜设计顾问",
              txt: "凭借在珠宝与腕表设计领域的丰富经验，为品牌提供创意设计顾问服务，帮助品牌塑造独特的设计语言和市场竞争力。",
            },
            {
              label: "旅法高级珠宝腕表设计师",
              txt: "在法国深耕设计行业多年，拥有深厚的珠宝与腕表设计技巧，擅长将东方与西方的设计理念完美融合，打造精致且富有文化底蕴的作品。",
            },
            {
              label: "任职经历",
              txt: "",
            },
            {
              label: "北京服装学院外聘讲师",
              txt: "以其深厚的专业背景，曾为珠宝与设计领域的学生传授宝贵经验与技巧。",
            },
            {
              label: "宝诗龙（Boucheron）珠宝设计师",
              txt: "在世界著名珠宝品牌宝诗龙工作期间，参与了多个经典珠宝系列的设计工作，积累了丰富的创作经验。",
            },
            {
              label: "路易·威登（Louis Vuitton）珠宝艺术总监助理设计师",
              txt: "担任路易·威登珠宝艺术总监的助理设计师，为品牌的高级珠宝系列提供创意支持，并参与重要项目的设计。",
            },
            {
              label: "Baccarat 2018年度珠宝系列设计师",
              txt: "为知名品牌Baccarat设计了其2018年度珠宝系列，作品展现了高超的工艺与独特的艺术风格。",
            },
            {
              label: "荣誉",
              txt: "",
            },
            {
              label: "第44届世界技能大赛珠宝业法国阿基坦大区银牌",
              txt: "凭借卓越的设计与工艺技术，在国际珠宝设计大赛中获得银牌荣誉，展示了其卓越的技艺与设计才能。",
            },
          ],
        },
        {
          img: require("@/assets/asissi/user/zsmart.jpg"),
          name: "张子慧",
          eName: "Zhang Zihui（Echo）",
          title: [
            {
              label: "爱喜喜品牌联合创始人",
              txt: "作为品牌的联合创始人之一，张子慧致力于品牌的战略发展和市场运营，推动品牌在竞争激烈的市场中稳步成长与创新。",
            },
            {
              label: "任职经历",
              txt: "",
            },
            {
              label: "腾讯高级运营",
              txt: "在腾讯担任高级运营职位，负责腾讯广告相关业务的整体运营管理，推动广告产品的优化与市场增长。",
            },
            {
              label: "百度高级视觉设计师",
              txt: "在百度担任高级视觉设计师，专注于产品视觉设计的创新与用户体验的提升，深刻理解产品与用户需求，创造出高效且具有吸引力的设计作品。",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.research_wrap {
  position: relative;
  width: 100%;

  .el-carousel__item {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .tips_font {
    position: absolute;
    top: 260px;
    left: 300px;
    z-index: 5;
    color: #2d3937;
    font-size: 25px;
    @media screen and (max-width: 768px) {
      font-size: 0.5rem;
    }
  }

  .product_shows_wrap {
    width: 100%;
    background: #f4f9fc;
    background-size: cover;
    padding: 10px 0 50px 0;
    box-sizing: border-box;
    margin-top: 250px;
    margin-bottom: 50px;
    @media screen and (max-width: 768px) {
      margin-top: 30px;
    }
    .production_title_wrap {
      width: 100%;
      margin-top: 50px;
      @media screen and (max-width: 768px) {
        margin-top: 30px;
      }
      .production_inner {
        display: flex;
        justify-content: center;
        .inner_left {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          @media screen and (max-width: 768px) {
            flex: 1;
          }
          img {
            width: 30%;
          }
        }
        .inner_center {
          width: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 50px;
          @media screen and (max-width: 768px) {
            flex: 2.2;
          }
          .production_title {
            font-size: 40px;
            font-weight: bold;
            @media screen and (max-width: 768px) {
              font-size: 1rem;
            }
          }
          .production_desc {
            font-size: 16px;
            color: #787878;
            margin-top: 10px;
            @media screen and (max-width: 768px) {
              margin-top: 10px;
            }
          }
        }
        .inner_right {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          @media screen and (max-width: 768px) {
            flex: 1;
          }
          img {
            width: 30%;
          }
        }
      }
    }
  }
  .develop_wrap {
    width: 70%;
    margin: 0 auto;
    display: flex;
    margin-top: 100px;
    @media screen and (max-width: 768px) {
      width: 90%;
      flex-direction: column;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .develop_left {
      margin-right: 100px;
      padding: 10px 40px;
      box-sizing: border-box;
      h1 {
        font-size: 26px;
        @media screen and (max-width: 768px) {
          font-size: 0.95rem;
        }
      }
      p {
        margin-top: 30px;
        font-size: 20px;
        color: #5b6e74;
        @media screen and (max-width: 768px) {
          font-size: 13px;
        }
      }
    }
    .develop_right {
      width: 100%;
      @media screen and (max-width: 768px) {
        width: 40%;
        margin: 0 auto;
      }
      img {
        width: 100%;
      }
      .tips {
        text-align: center;
        color: #2091d3;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}

.dev-Box {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  @media screen and (max-width: 768px) {
    display: block;
  }
}
</style>
